<template>
  <el-aside width="200px" class="sidebar-container">
    <el-menu
      default-active="welcome"
      class="el-menu-vertical-demo sidebar-menu"
      @select="handleMenuSelect"
    >
      <el-menu-item index="welcome" class="sidebar-menu-item">
        <el-icon class="menu-icon"><House /></el-icon>
        <span class="menu-text">欢迎</span>
      </el-menu-item>
      <el-menu-item index="strategy-backtest" class="sidebar-menu-item">
        <el-icon class="menu-icon"><TrendCharts /></el-icon>
        <span class="menu-text">策略回测</span>
      </el-menu-item>
      <el-menu-item index="position-calculation" class="sidebar-menu-item">
        <el-icon class="menu-icon"><Histogram /></el-icon>
        <span class="menu-text">仓位计算</span>
      </el-menu-item>
      <el-menu-item index="transaction-record" class="sidebar-menu-item">
        <el-icon class="menu-icon"><Document /></el-icon>
        <span class="menu-text">交易记录</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { House, TrendCharts, Histogram, Document } from '@element-plus/icons-vue'

const router = useRouter()

const handleMenuSelect = (index) => {
  const targetPath = index === 'welcome' ? '/' : `/${index}`
  router.push(targetPath)
}
</script>

<style scoped>
/* 核心修改：固定侧边栏定位 */
.sidebar-container {
  position: fixed; /* 固定定位，相对于视口 */
  left: 0;         /* 靠左对齐 */
  top: 0;          /* 靠上对齐 */
  height: 100vh;   /* 高度占满整个视口 */
  background-color: #545c64;
  z-index: 10;     /* 确保在其他内容之上（避免被遮挡） */
  padding-top: 16px;
}

.sidebar-menu {
  background-color: transparent;
  border-right: none;
}

.sidebar-menu-item {
  color: #e5e7eb !important;
  height: 50px !important;
  margin: 0 8px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}

.sidebar-menu-item:hover {
  background-color: #6b7280 !important;
  color: #ffffff !important;
}

.sidebar-menu-item.is-active {
  background-color: #2f80ed !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}

.menu-icon {
  margin-right: 8px !important;
  font-size: 16px !important;
}

.menu-text {
  font-size: 14px !important;
}
</style>
    